<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的智能助手</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .chat-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .response-area {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            border-bottom: 1px solid #ccc;
        }

        .mode-selector {
            padding: 10px;
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
        }

        .mode-selector label {
            margin-right: 15px;
            cursor: pointer;
        }

        .input-area {
            display: flex;
            padding: 10px;
            background: #f5f5f5;
        }

        #questionInput {
            flex: 1;
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        #submitBtn {
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #submitBtn:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
<div class="chat-container">
    <div class="response-area" id="responseArea"></div>
    <div class="mode-selector">
        <label><input type="radio" name="mode" value="qa" checked> 问答系统</label>
        <label><input type="radio" name="mode" value="draw"> 智能画图</label>
    </div>
    <div class="input-area">
        <input type="text" id="questionInput" placeholder="请输入您的问题...">
        <button id="submitBtn">发送</button>
    </div>
</div>

<script>
    // 结果输出区域
    const responseArea = document.getElementById('responseArea');

    // 发送按钮点击响应
    document.getElementById('submitBtn').addEventListener('click', function () {
        const input = document.getElementById('questionInput');
        const mode = document.querySelector('input[name="mode"]:checked').value;

        if (input.value.trim() === '') {
            alert('请输入问题内容');
            return;
        }

        // 添加用户发送的内容
        const userDiv = document.createElement('div');
        userDiv.style.textAlign = 'right'; // 用户发送的内容靠右对齐
        userDiv.style.margin = '10px 0';
        const now = new Date();
        const timeStr = '我 ' + now.getHours().toString().padStart(2, '0') + ':' +
            now.getMinutes().toString().padStart(2, '0') + ':' +
            now.getSeconds().toString().padStart(2, '0');
        const timeDiv = document.createElement('div');
        timeDiv.style.textAlign = 'right';
        timeDiv.textContent = timeStr;
        userDiv.appendChild(timeDiv);
        const contentDiv = document.createElement('div');
        contentDiv.textContent = input.value;
        userDiv.appendChild(contentDiv);
        responseArea.appendChild(userDiv);

        let url = "";
        if (mode === "qa") {
            // 模式是qa，设置问答接口地址
            url = "http://127.0.0.1:5000/chat";
        } else {
            // 模式是绘图，设置绘图接口地址
            url = "http://127.0.0.1:5000/draw";
        }
        // 发送异步请求
        axios.post(url, {question: input.value,})
            .then(function (response) {
                // 显示结果
                showAnswer(response.data.answer)
            })
            .catch(function (error) {
                console.error('请求失败:', error);
            });
        input.value = '';
    });

    // 显示结果
    function showAnswer(answer) {
        const aiDiv = document.createElement('div');
        aiDiv.style.margin = '10px 0';
        const now = new Date();
        const timeStr = 'AI ' + now.getHours().toString().padStart(2, '0') + ':' +
            now.getMinutes().toString().padStart(2, '0') + ':' +
            now.getSeconds().toString().padStart(2, '0');
        const aiTimeDiv = document.createElement('div');
        aiTimeDiv.textContent = timeStr;
        aiDiv.appendChild(aiTimeDiv);
        const aiContentDiv = document.createElement('div');
        // 检测是否为图片链接
        if (answer.match(/\.(jpg|jpeg|png|gif)$/i)) {
            const img = document.createElement('img');
            img.src = answer;
            img.style.maxWidth = '25%';
            aiContentDiv.appendChild(img);
        } else {
            aiContentDiv.textContent = answer;
            // 此处可添加JS代码，访问语音合成接口实现播放音频

        }
        aiDiv.appendChild(aiContentDiv);
        responseArea.appendChild(aiDiv);


    }
</script>
</body>
</html>